<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>简易选项卡</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Microsoft YaHei';
            font-size: 14px;
        }
        
        section {
            width: 300px;
            margin: 10px auto 0 auto;
            border: 1px solid #000;
        }
        
        section ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            background-color: #000;
        }
        section li{
            display: inline-block;
            margin: 0;
            line-height: 30px;
            width: 70px;
            text-align: center;
            border-right: 1px solid #000;
            color: #fff;
        }
        section li:first-of-type{
            color: #000;
            background-color: #aaa;
        }
        section li:hover{
            cursor: pointer;
        }
        .active{
            color: #000;
            background-color: #aaa;
        }

        main{
            width: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            border-top: none;
            padding-top: 14px;
        }
        main ul{
            margin-top: 0;
            display: none;
        }
        main ul:first-of-type{
            display: block;
        }
        main li{
            margin: 0;
            line-height: 32px;
        }
    </style>
</head>

<body>
    <section>
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
    </section>
    <main>
        <ul>
            <li>内容1</li>
            <li>内容1</li>
        </ul>
        <ul>
            <li>内容2</li>
            <li>内容2</li>
            <li>内容2</li>
        </ul>
        <ul>
            <li>内容3</li>
            <li>内容3</li>
            <li>内容3</li>
            <li>内容3</li>
        </ul>
    </main>
</body>

</html>
<script>
window.onload = function(){

    $('section li').hover(function(index){
        $(this).css({'color':'#000','background-color':'#aaa'})
        .siblings().css({'color':'#fff','background-color':'#000'});

        $('main ul').eq($('section li').index(this)).css({'display':'block'})
        .siblings().css('display','none');
    })

} 
</script>